<template>
  <div>
    <el-form >
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column label="章节标题" width="163" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.chapterName"
              style="width: 143px"
              clearable
              value="默认章节名"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="章节简介" width="160" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.chapterDesc"
              style="width: 143px"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否收费" align="center" width="160">
          <template slot-scope="scope">
            <el-switch
              style="display: block"
              v-model="scope.row.isFree"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="收费"
              :active-value=false
              inactive-text="免费"
              :inactive-value=true
              @change="changeSwitch(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="章节原价" align="center" width="160">
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model="scope.row.chapterOriginal"
              style="width: 138px"
              :disabled.sync="scope.row.isFree"
              
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="优惠价格" align="center" width="150">
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model="scope.row.chapterDiscount"
              style="width: 138px"
              clearable
              :disabled.sync="scope.row.isFree"
              
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" width="150">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.sort"
              style="width: 138px "
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="margin: 20px 0px 0px 5px">
      <el-row>
        <el-button type="danger" @click="deleteAll()">批量删除</el-button>
        <el-button type="primary" @click="addClick()">添加章节</el-button>
      </el-row>
    </div>
    <div style="float: right; margin: 20px 20px 0px 0px">
      <el-row>
        <el-button type="primary" @click="submit()">确认添加</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/chapters.js'
export default {
  data() {
    return {
      list: [],
      tableData: [],
      multipleSelection: [],
      sort: "",
      status: true
    };
  },
  created(){
    this.sort = this.$route.query.sort;
  },
  methods: {
    changeSwitch(val){
       if(val.isFree){
         val.chapterOriginal= ''
          val.chapterDiscount= ''
       }else{
         
       }
    },
    addClick() {
      var list = {
        chapterName: "默认章节名",
        chapterDesc: "",
        isFree: true,
        chapterOriginal: "",
        chapterDiscount: "",
        sort: this.sort,
      };
      this.sort++;
      this.tableData.push(list);
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    deleteAll() {
      for (let i = 0; i < this.tableData.length; i++) {
        const element = this.tableData[i];
        element.index = i;
      }
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择要删除的数据");
      }
      this.multipleSelection.forEach((element) => {
        this.tableData.forEach((e, i) => {
          if (element.index == e.index) {
            this.tableData.splice(i, 1);
          }
        });
      });
    },
    submit(){
        let Selection = [...this.multipleSelection]
        for(let i = 0; i <Selection.length; i++){
          Selection[i].courseId=this.$route.query.courseId;
          if(Selection[i].isFree){
            Selection[i].isFree = 1;
          }else{Selection[i].isFree = 0;}
        }
        console.log(Selection);
        // api.bratchSave(this.multipleSelection).then(res => {
        //   console.log(res.msg);
        // })
        
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>